<template>
  <div>
    <div class="register" v-if="register">
      <p class="title">云公社</p>
      <p class="tip1">为使得任务顺利进行，请先验证哦～</p>
      <div class="phone">
        <img src="@/assets/images/account.png" alt="">
        <input type="tel" placeholder="请输入手机号码" v-model="form.mobile"  @blur="scroll">
      </div>
      <div class="password">
        <img src="@/assets/images/verify.png" alt="">
        <input type="tel" placeholder="请输入验证码" v-model="form.code"  @blur="scroll">
        <span v-show="show" @click="getCode">获取验证码</span>
        <span v-show="!show" @click="getCode">{{count}}s重新获取</span>
      </div>
      <div class="btn">
        <input type="button" value="确定" @click="onsubmit">
      </div>
      <p class="tip2" v-html="info"></p>
    </div>
    <div class="registerFinish" v-if="registerFinish">
      <img src="../assets/images/bindPhone.png" alt="">
      <p>您已绑定过，无需重复绑定哦~</p>
    </div>
  </div>
</template>

<script>
  /**
   *
   * @Author zzl
   * @Date 2019/5/22 14:37.
   */
  import {Indicator} from 'mint-ui';
  import utils from '../lib/StringExtend'

  export default {
    mounted() {
      if (!utils.isNone(utils.getCookie('open_id_' + this.wechatId)) && !utils.isNone(this.wechat_id)) {
        this.loadData();
      } else if (!utils.isNone(utils.getCookie('open_id_' + this.wechatId))) {
        setTimeout(() => {
          this.loadData();
        }, 300)
      }
      //获取用户地址
      this.$store.dispatch('getUserAddress', {vm: this});
    },
    components: {},
    props: {},
    data() {
      return {
        register: false,
        registerFinish: false,
        form: {
          code: '',
          mobile: ''
        },
        info: '',
        show: true,
        count: '',
        timer: null,
        wechatId: utils.getCookie('wechat_id'),
        wechat_id: this.$route.query.wechat_id,//公众号
      }
    },
    computed: {},
    methods: {
      loadData() {
        let params = {
          open_id: utils.getCookie('open_id_' + this.wechatId)
        };
        this.$axios.userConfig(params).then(res => {
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return false;
          }
          this.info = res.data.info;
          if (res.data.is_bind === 0) {
            this.register = true;
          } else {
            this.registerFinish = true;
          }
        })
      },
      //提交绑定手机
      async onsubmit() {
        if (JSON.stringify(this.$store.state.userAddress)=="{}") {
          await this.$store.dispatch('getUserAddress', {vm: this});
        }
        if (this.form.mobile === '') {
          this.$toast('请输入手机号码');
          return false;
        }
        if (this.form.code === '') {
          this.$toast('请输入验证码');
          return false;
        }
        let params = Object.assign(this.form, {
          open_id: utils.getCookie('open_id_' + this.wechatId),
          lng:this.$store.state.userAddress.longitude,
          lat:this.$store.state.userAddress.latitude,
        });
        Indicator.open('加载中...');
        this.$axios.userBindMobile(params).then(res => {
          Indicator.close();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
          }
          if (res.errcode === '000') {
            this.$toast(res.errmsg);
            window.location.reload();
          }
        })
      },
      //发送验证码
      sendCode() {
        let params = {
          mobile: this.form.mobile,
          open_id: utils.getCookie('open_id_' + this.wechatId)
        };
        Indicator.open('加载中...');
        this.$axios.userSendVerifyCode(params).then(res => {
          Indicator.close();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg)
          }
          this.$toast(res.errmsg)
        })
      },
      getCode() {
        if (this.form.mobile === '') {
          this.$toast('请输入手机号码');
          return false;
        }
        if (!(/^1[345678]\d{9}$/.test(this.form.mobile))) {
          this.$toast('手机号码格式错误');
          return false;
        }
        if (this.timer === null) {
          this.sendCode();
        }
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        }
      },
      //ios软件盘页面内容不下滑
      scroll() {
        var currentPosition, timer;
        var speed = 1;//页面滚动距离
        timer = setInterval(function () {
          currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
          currentPosition -= speed;
          window.scrollTo(0, currentPosition);//页面向上滚动
          currentPosition += speed; //speed变量
          window.scrollTo(0, currentPosition);//页面向下滚动
          clearInterval(timer);
        }, 1);
      },
    },
    watch: {},
    filters: {},
    beforeDestroy() {

    }
  }
</script>

<style lang="less" scoped>
  .registerFinish {
    width: 100%;
    height: 100%;
    overflow: hidden;

    img {
      width: 1.8rem;
      height: 1.3rem;
      display: block;
      margin: 0 auto;
      margin-top: 1.88rem;
    }

    p {
      margin-top: 0.55rem;
      color: #999999;
      font-size: 0.3rem;
      text-align: center;
    }
  }

  .register {
    padding: 0 0.28rem 0 0.26rem;
    box-sizing: border-box;
    overflow: hidden;

    .title {
      color: #333333;
      font-size: 0.48rem;
      margin-top: 0.88rem;
      margin-bottom: 0.25rem;
      font-weight: 700;
      padding-left: 0.38rem;
      box-sizing: border-box;
      letter-spacing: 0.08rem;
    }

    .tip1 {
      color: #999999;
      font-size: 0.3rem;
      margin-bottom: 0.82rem;
      padding-left: 0.38rem;
      box-sizing: border-box;
      letter-spacing: 0.06rem;
    }

    .phone {
      width: 6.96rem;
      height: .80rem;
      background: rgba(248, 248, 248, 1);
      border-radius: .40rem;
      margin-bottom: 0.47rem;
      display: flex;
      flex-direction: row;
      align-items: center;

      img {
        width: 0.33rem;
        height: 0.36rem;
        margin: 0 0.3rem 0 0.4rem;
      }

      input {
        width: 5.6rem;
        border: 0;
        background: none;
        color: #999999;
        font-size: 0.3rem;
        height: 0.35rem;
        line-height: 0.38rem;
        margin: 0.225rem 0;
      }

      input::placeholder {
        color: #999999;
      }
    }

    .password {
      width: 6.96rem;
      height: .80rem;
      background: rgba(248, 248, 248, 1);
      border-radius: .40rem;
      margin-bottom: 0.61rem;
      display: flex;
      flex-direction: row;
      align-items: center;

      img {
        width: 0.32rem;
        height: 0.38rem;
        margin: 0 0.3rem 0 0.4rem;
      }

      input {
        width: 4rem;
        border: 0;
        background: none;
        color: #999999;
        font-size: 0.3rem;
        height: 0.35rem;
        line-height: 0.38rem;
        margin: 0.225rem 0;
      }

      input::placeholder {
        color: #999999;
      }

      span {
        color: #FDB405;
        font-size: 0.3rem;
      }
    }

    .btn {
      margin-bottom: 0.51rem;

      input {
        width: 6.96rem;
        height: 0.8rem;
        background: linear-gradient(45deg, rgba(253, 180, 5, 1), rgba(253, 204, 74, 1));
        border-radius: 0.4rem;
        border: 0;
        color: white;
        font-size: 0.3rem;
      }

    }

    .tip2 {
      color: #999999;
      font-size: 0.24rem;
      text-align: left;
      line-height: 0.36rem;
      letter-spacing: 0.02rem;
    }
  }
</style>
